<template>
	<view class="list-card">
		<!-- 口碑榜 -->
		<view
			v-if="['scenic-koubei', 'line-koubei', 'hotel-koubei'].includes(type)"
			class="koubei"
			:style="{
				backgroundImage: 'url(' + getKoubeiBg + ')',
				backgroundSize: 'cover',
			}"
		>
			<view class="title">
				<view class="title-right">
					全部
					<image :src="imgBaseUrl + 'rank-icon-right.png'" mode="aspectFill" />
				</view>
			</view>
			<view class="list">
				<view
					v-for="(item, index) in [
						{
							image: imgBaseUrl + 'test1.png',
							title: '恩施大峡谷',
							desc: '世界地质奇观，喀斯特地貌',
						},
						{
							image: imgBaseUrl + 'test1.png',
							title: '恩施大峡谷',
							desc: '世界地质奇观，喀斯特地貌',
						},
						{
							image: imgBaseUrl + 'test1.png',
							title: '恩施大峡谷',
							desc: '世界地质奇观，喀斯特地貌',
						},
					]"
					:key="index"
					class="item"
					@click="handleKoubeiClick(item)"
				>
					<view class="item-img-content">
						<view
							class="item-rank"
							:style="{
								backgroundImage: 'url(' + imgBaseUrl + `top-${index + 1}.png)`,
							}"
						></view>
						<image :src="item.image" mode="aspectFill" class="item-img" />
					</view>
					<view class="item-info">
						<view class="name text-ellipsis">{{ item.title }}</view>
						<view class="desc text-ellipsis">{{ item.desc }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 爆款推荐 -->
		<view
			v-if="type === 'hot'"
			class="baokuan"
			:style="{
				backgroundImage: 'url(' + imgBaseUrl + 'baokuan-bg.png)',
				backgroundSize: 'cover',
			}"
		>
			<view class="title">
				<image :src="imgBaseUrl + 'jinritehui.png'" mode="widthFix" />
				<view class="text-1">必囤爆款</view>
			</view>
			<view class="item">
				<image :src="imgBaseUrl + 'test2.png'" mode="aspectFill" class="item-img" />
				<view class="item-content">
					<view class="line-1">恩施土司城景区</view>
					<view class="line-2">仿古土司宫廷建筑群</view>
					<view class="line-3">
						<view class="line-3-left">
							<view class="line-3-price">
								<text class="price-icon">￥</text>
								<text>321</text>
							</view>
							<view class="line-3-discount">￥415</view>
						</view>
						<view class="line-3-right">抢购</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 种草文章 -->
		<view v-if="type === 'article'" class="zhongcao zhuangcao-article">
			<view class="article-xianlu-icon">线路</view>
			<image class="article-img" :src="imgBaseUrl + 'test3.png'" mode="widthFix" />
			<view class="article-content">
				<text class="article-title text-2-ellipsis">一生一次旅游 — 恩施大峡谷</text>
				<view class="article-info">
					<view class="author-info text-ellipsis">
						<image class="author-avatar" :src="imgBaseUrl + 'test2.png'" mode="aspectFill" />
						<text class="author-name text-ellipsis">快乐小栗</text>
					</view>
					<view class="like-info">
						<image class="like-icon" :src="imgBaseUrl + 'icon-like.png'" mode="aspectFill" />
						<text class="like-count">4721</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 种草视频 -->
		<view v-if="type === 'video'" class="zhongcao zhuangcao-video">
			<image class="article-video-icon" :src="imgBaseUrl + 'article-video.png'" mode="aspectFill"></image>
			<image class="article-img" :src="imgBaseUrl + 'test3.png'" mode="widthFix" />
			<view class="article-content">
				<text class="article-title text-2-ellipsis">恩施大峡谷"陷爬"招募啦！</text>
				<view class="article-info">
					<view class="author-info text-ellipsis">
						<image class="author-avatar" :src="imgBaseUrl + 'test2.png'" mode="aspectFill" />
						<text class="author-name text-ellipsis">恩施大峡谷旅游官方号</text>
					</view>
					<view class="like-info">
						<image class="like-icon" :src="imgBaseUrl + 'icon-like.png'" mode="aspectFill" />
						<text class="like-count">4721</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 景区 -->
		<view v-if="type === 'scenic'" class="scenic">
			<image class="scenic-img" :src="imgBaseUrl + 'test2.png'" mode="widthFix" />
			<view class="scenic-info">
				<view class="title">恩施大峡谷</view>
				<view class="score-wrap">
					<view class="score-box">
						<view class="icon-star">
							<image :src="imgBaseUrl + 'star.png'"></image>
						</view>
						<text class="score">4.8</text>
					</view>
					<view class="rank text-ellipsis">景区榜第1名</view>
				</view>
				<view class="tags">
					<text v-for="(tag, index) in ['5A景区', '地质奇观']" :key="index" class="tag">
						{{ tag }}
					</text>
				</view>
				<view class="price-wrap">
					<view class="symbol">¥</view>
					<view class="price">168</view>
					<view class="unit">起</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { computed } from "vue"

// 定义卡片类型
type CardType = "scenic-koubei" | "line-koubei" | "hotel-koubei" | "hot" | "article" | "video" | "ad" | "scenic"

// 定义props
interface Props {
	type: CardType
	cardData?: any
}

const imgBaseUrl = inject("imgBaseUrl")

// 根据口碑卡片类型计算背景图
const getKoubeiBg = computed(() => {
	const imgUrl = ""
	switch (props.type) {
		case "scenic-koubei":
			return imgBaseUrl + "bg-jingqu-rank.png"
		case "line-koubei":
			return imgBaseUrl + "bg-jingqu-xianlu.png"
		case "hotel-koubei":
			return imgBaseUrl + "bg-jingqu-jiudian.png"
		default:
			return ""
	}
})

const props = defineProps<Props>()

// 定义事件
const emit = defineEmits<{
	(e: "itemClick", data: any): void
}>()

// 计算口碑榜标题
const getKoubeiTitle = computed(() => {
	switch (props.type) {
		case "scenic-koubei":
			return "景区口碑榜"
		case "line-koubei":
			return "线路口碑榜"
		case "hotel-koubei":
			return "酒店口碑榜"
		default:
			return ""
	}
})

// 跳转函数
const handleKoubeiClick = (item: any) => {
	switch (props.type) {
		case "scenic-koubei":
			uni.navigateTo({
				url: `/pages/scenic/detail?id=${item.id}`,
			})
			break
		case "line-koubei":
			uni.navigateTo({
				url: `/pages/line/detail?id=${item.id}`,
			})
			break
		case "hotel-koubei":
			uni.navigateTo({
				url: `/pages/hotel/detail?id=${item.id}`,
			})
			break
	}
	emit("itemClick", item)
}

const handleHotClick = (item: any) => {
	uni.navigateTo({
		url: `/pages/goods/detail?id=${item.id}`,
	})
	emit("itemClick", item)
}

const handleArticleClick = (item: any) => {
	uni.navigateTo({
		url: `/pages/article/detail?id=${item.id}`,
	})
	emit("itemClick", item)
}

const handleVideoClick = (item: any) => {
	uni.navigateTo({
		url: `/pages/video/detail?id=${item.id}`,
	})
	emit("itemClick", item)
}

const handleAdClick = (item: any) => {
	if (item.url) {
		// 如果是外部链接
		if (item.url.startsWith("http")) {
			uni.navigateTo({
				url: `/pages/webview/index?url=${encodeURIComponent(item.url)}`,
			})
		} else {
			// 内部页面跳转
			uni.navigateTo({
				url: item.url,
			})
		}
	}
	emit("itemClick", item)
}

const handleScenicClick = (item: any) => {
	uni.navigateTo({
		url: `/pages/scenic/detail?id=${item.id}`,
	})
	emit("itemClick", item)
}
</script>

<style lang="scss" scoped>
.list-card {
	//margin: 8rpx;
	// 口碑榜
	.koubei {
		display: flex;
		flex-direction: column;
		padding: 24rpx 8rpx 8rpx;
		border-radius: 16rpx;

		.title {
			display: flex;
			justify-content: flex-end;
			padding: 8rpx 8rpx;
			position: relative;
			z-index: 1;

			.title-right {
				font-size: 24rpx;
				font-weight: normal;
				line-height: normal;
				text-align: right;
				color: #763e08;

				image {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}

		.list {
			padding: 24rpx 12rpx;
			display: flex;
			flex-direction: column;
			gap: 24rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 16rpx;
			position: relative;
			z-index: 1;

			.item {
				display: flex;
				align-items: center;

				.item-img-content {
					width: 88rpx;
					height: 88rpx;
					border-radius: 10rpx;
					overflow: hidden;
					position: relative;

					.item-rank {
						position: absolute;
						top: 0;
						left: 0;
						width: 32rpx;
						height: 36rpx;
						background-size: cover;
					}

					.item-img {
						width: 100%;
						height: 100%;
					}
				}

				.item-info {
					width: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
					margin-left: 8rpx;

					.name {
						width: 100%;
						font-size: 28rpx;
						font-weight: 500;
						line-height: normal;
						color: #1d2129;
						text-align: left;
					}

					.desc {
						width: 100%;
						font-size: 20rpx;
						line-height: 36rpx;
						color: #86909c;
					}
				}
			}
		}
	}

	// 爆款推荐
	.baokuan {
		padding: 24rpx 8rpx 8rpx;
		background-size: cover;
		display: flex;
		flex-direction: column;
		border-radius: 16rpx;

		.title {
			display: flex;
			align-items: center;
			padding: 0 8px;
			margin-bottom: 16rpx;

			image {
				width: 144rpx;
			}

			.text-1 {
				font-size: 32rpx;
				font-weight: 500;
				line-height: normal;
				margin-left: 8rpx;
				color: #ffffff;
			}
		}

		.item {
			border-radius: 16rpx;
			background-color: #fff;

			.item-img {
				width: 100%;
				height: 196rpx;
				border-radius: 12rpx;
			}

			.item-content {
				padding: 16rpx 12rpx;

				.line-1 {
					font-size: 28rpx;
					font-weight: 500;
					line-height: normal;
					color: #1d2129;
				}

				.line-2 {
					font-size: 12px;
					font-weight: normal;
					line-height: normal;
					color: #86909c;
				}

				.line-3 {
					display: flex;
					align-items: flex-end;
					justify-content: space-between;

					.line-3-left {
						display: flex;

						.line-3-price {
							font-size: 32rpx;
							font-weight: 900;
							line-height: normal;
							color: #f53f3f;
							margin-right: 4rpx;

							.price-icon {
								font-size: 20rpx;
							}
						}

						.line-3-discount {
							display: flex;
							align-items: flex-end;
							font-size: 24rpx;
							font-weight: normal;
							line-height: 36rpx;
							text-decoration: line-through;
							color: #c9cdd4;
						}
					}

					.line-3-right {
						padding: 6rpx 24rpx;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center;
						background: #f53f3f;
						border-radius: 24rpx;
						font-size: 24rpx;
						font-weight: 500;
						line-height: 18px;
						color: #ffffff;
					}
				}
			}
		}
	}

	.zhongcao {
		width: 100%; // 左右留20rpx边距
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;

		// 图片
		.article-img {
			width: 100%;
		}

		// 内容区域
		.article-content {
			padding: 14rpx 16rpx 24rpx;

			// 标题
			.article-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #1d2129;
				line-height: 1.5;
				margin-bottom: 16rpx; // 小间距
			}

			// 底部信息
			.article-info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				// 作者信息
				.author-info {
					display: flex;
					align-items: center;

					.author-avatar {
						width: 32rpx;
						height: 32rpx;
						border-radius: 50%;
					}

					.author-name {
						width: 180rpx;
						font-size: 28rpx;
						color: #86909c;
						max-width: 400rpx; // 防止过长
						margin-left: 8rpx;
					}
				}

				// 点赞信息
				.like-info {
					display: flex;
					align-items: center;
					gap: 8rpx;

					.like-icon {
						width: 32rpx;
						height: 32rpx;
					}

					.like-count {
						font-size: 28rpx;
						color: #86909c;
					}
				}
			}
		}
	}

	// 种草文章
	.zhuangcao-article {
		position: relative;

		.article-xianlu-icon {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			right: 12rpx;
			top: 12rpx;
			padding: 2rpx 10rpx;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 24rpx;
			color: #1d2129;
			font-size: 24rpx;
		}
	}

	// 种草视频
	.zhuangcao-video {
		position: relative;

		.article-video-icon {
			position: absolute;
			top: 12rpx;
			right: 12rpx;
			width: 40rpx;
			height: 40rpx;
			border-radius: 16rpx;
		}
	}

	// 广告位
	.ad {
		width: 100%;
		height: 400rpx;
		background-size: cover;
		border-radius: 16rpx;
		//.ad-img {
		//	width: 100%;
		//	height: 100%;
		//}
	}

	// 景区
	.scenic {
		width: 100%; // 两边留20rpx间距
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;

		// 图片
		.scenic-img {
			width: 100%;
		}

		// 信息区域
		.scenic-info {
			padding: 14rpx 16rpx 24rpx;

			// 标题
			.title {
				font-size: 28rpx;
				font-weight: 600;
				color: #1d2129;
				margin-bottom: 16rpx; // 小间距
			}

			// 评分和排名
			.score-wrap {
				display: flex;
				align-items: center;
				gap: 16rpx; // 小间距
				margin-bottom: 16rpx; // 小间距

				// 评分
				.score-box {
					display: flex;
					align-items: center;
					padding: 4rpx 8rpx;
					background: #fde8e8; // 浅红色背景
					border-radius: 8rpx;

					.icon-star {
						display: flex;
						align-items: center;
						height: 100%;
						image {
							width: 24rpx;
							height: 24rpx;
						}
					}

					.score {
						font-size: 28rpx;
						font-weight: 600;
						color: #f53f3f; // 深红色
					}
				}

				// 排名
				.rank {
					font-size: 24rpx;
					color: #7c4a1b; // 深红色
					background: #fff6e1; // 浅黄色背景
					padding: 4rpx 12rpx;
					border-radius: 4rpx;
				}
			}

			// 标签
			.tags {
				display: flex;
				flex-wrap: wrap;
				gap: 8rpx; // 小间距
				margin-bottom: 16rpx; // 小间距
				width: 100%;
				overflow-x: scroll;

				.tag {
					flex: 0 0 auto;
					font-size: 24rpx;
					color: #86909c;
					border: 1px solid #e1e2e8;
					padding: 4rpx 16rpx;
					border-radius: 8rpx;
				}
			}

			// 价格
			.price-wrap {
				display: flex;
				align-items: flex-end;
				line-height: 1; // 关键：统一行高倍数

				.symbol {
					font-size: 24rpx;
					color: #f53f3f;
					line-height: 1; // 设置为1，确保文字紧贴底部
				}

				.price {
					font-size: 40rpx;
					font-weight: 600;
					color: #f53f3f;
					line-height: 32rpx;
				}

				.unit {
					font-size: 24rpx;
					color: #f53f3f;
					margin-left: 4rpx;
					line-height: 1;
				}
			}
		}
	}
}
</style>
